<template>
  <div class="chart">
    <div id="chartId" ref="EcharRef" class="monitorContainer"></div>
  </div>
</template>

<script setup>
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';

const props = defineProps({
  chartOption: {
    type: Object,
    default: () => ({})
  },
});

// 坐标轴的颜色
const axisColor = ref('#D9D9D9');
const axisColor2 = ref('#999999');

// 柱条的颜色
const itemStyleColor = ref(['#FF5757', '#57aaff']);

onMounted(() => {
  setOption();
});

const setOption = () => {
  const chartDom = document.getElementById('chartId');
  const myChart = echarts.init(chartDom);

  nextTick(() => {
    setTimeout(() => {
      const currentYear = new Date().getFullYear();

      // 示例数据，根据需要替换为实际数据
      const xAxisData = ['北京', '上海', '深圳', '广州'];
      const seriesData = [
        {
          name: '入库量',
          type: 'bar',
          data: [Math.floor(Math.random() * 100), Math.floor(Math.random() * 100), Math.floor(Math.random() * 100), Math.floor(Math.random() * 100)],
          itemStyle: {
            color: itemStyleColor.value[0],
            barBorderRadius: [4, 4, 0, 0],
          },
          barWidth: 14,
        },
        {
          name: '出库量',
          type: 'bar',
          data: [Math.floor(Math.random() * 100), Math.floor(Math.random() * 100), Math.floor(Math.random() * 100), Math.floor(Math.random() * 100)],
          itemStyle: {
            color: itemStyleColor.value[1],
            barBorderRadius: [4, 4, 0, 0],
          },
          barWidth: 14,
        },
      ];

      let option = {
        title: {
          text: `${currentYear}年北京、上海、深圳、广州的出入库量`,
          left: 'center',
          top: '10',
          textStyle: {
            color: '#333333',
            fontWeight: 'bolder',
            fontSize: 14,
          },
        },
        grid: {
          left: '10%',  // 增加左边距
          right: '10%', // 增加右边距
          bottom: '15%', // 增加底部边距，为图例留出空间
          containLabel: true,
        },
        legend: {
          data: ['入库量', '出库量'],
          right: '5%',
          bottom: '5%',
          textStyle: {
            color: axisColor2.value,
          },
          itemGap: 10, // 增加图例项之间的间隙
        },
        xAxis: {
          type: 'category',
          data: xAxisData,
          axisLine: {
            lineStyle: {
              color: axisColor.value,
            },
          },
          axisTick: {
            show: true,
            lineStyle: {
              color: axisColor.value,
            },
          },
          axisLabel: {
            interval: 0,
            align: 'center',
            color: axisColor2.value,
            formatter: function(value) {
              return value.length > 3 ? value.substring(0, 3) + '\n...' : value;
            },
          },
        },
        yAxis: {
          type: 'value',
          name: '数量',
          nameTextStyle: {
            color: axisColor2.value,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: axisColor2.value,
          },
          splitLine: {
            lineStyle: {
              color: axisColor.value,
            },
          },
        },
        series: seriesData,
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {
            let result = '';
            params.forEach(item => {
              result += `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background:${item.color}"></span>${item.seriesName}: ${item.value}<br/>`;
            });
            return result;
          },
          backgroundColor: '#FFFFFF',
          borderColor: '#eef3f8',
          borderWidth: 1,
          textStyle: {
            color: '#8C8C8C',
          },
          padding: 12,
        },
      };

      // 设置柱状图之间的间距
      option.grid.barCategoryGap = '40%'; // 调整这个值来控制柱状图之间的间距

      myChart.setOption(option);
    }, 10);
  });
};

const getSeriesOption = () => {
  // This function is not used directly since we're using the data in setOption
  return [];
};
</script>

<style lang="scss" scoped>
.chart {
  position: relative;
  display: inline-block;
  width: 50%;
  height: 100%;
}

.monitorContainer {
  width: 100%;
  height: 300px;

  & > div {
    &:first-child {
      width: 100% !important;

      & > canvas {
        width: 100% !important;
      }
    }
  }
}

.show {
  visibility: visible;
}

.hidden {
  visibility: hidden;
}
</style>